<template>
    <div class="with-draw">
        <ul class="bank-list" v-if='userInfo'>
            <li class="bank__item">
                <div class="bank__info">
                    <img :src="userInfo.bankcard.logoUrl">
                    <div class='bank__text' v-if='userInfo.bankcard'>
                        <p>{{defaultCard.bankName}}</p>
                        <span>{{defaultCard.cardNo | bankCard}}</span>
                    </div>
                </div>
                <div class="button pure auto" @click='show=true'>切换银行卡</div>
            </li>
        </ul>
        <div class="amount">
            <input class='money__input' type="number" :placeholder="inputPlaceholder" v-model='withDrawMoney' @blur='setMax'>
            <span class="button pure short" @click='withDrawAll'>全部提现</span>
        </div>
    
        <p class="cash-tips" v-if='cashOutInfo'>
            <template>
                今天可提现额度 <i>{{cashOutInfo.todayAvailableCashOut | toYuan}}</i> 元<br>
            </template>
            按照提现金额1%收取，最低2.5元/笔<span class='offer-tag'>随机减</span>
        </p>

        <div class="confirm-button">
            <span class="button long" @click='confirm'>提交</span>
        </div>
        <p class='go-detail' @click='goUserMoneyDetail'>查看资金明细 ></p>
        <cash-out-detail
            :amount='withDrawMoneyToFen'
            :show='showCashOutDetail'
            @close='showCashOutDetail=false'
            @finish='cashOutFinish'></cash-out-detail>

        <pay-password
            :show='showPayPassword'
            @close='showPayPassword=false'
            @finish='payFinish'></pay-password>

        <sms-code
            v-if='userInfo'
            :show='showSmsCode'
            :mobile='userInfo.user.mobile'
            type='CASH_OUT'
            @close='showSmsCode=false'
            @finish='smsFinish'></sms-code>

        <modal
            class='modal-bank-list'
            :show='show'
            @close='show = false'
            mode='bottom'
        >
            <li class="component-pay__item" v-for='(item,index) in list' @click='setDefaults(item)'>
                <span><img :src="item.logoUrl"></span>
                <p>{{item.bankName}}({{item.cardNo | bankCard }})</p>
                <i class='iconfont icon-check' v-if='item.defaults == true'></i>
            </li>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import payPassword from '../components/PayPassword.vue'
    import smsCode from '../components/SmsCode.vue'
    import toYuan from '../filters/filter-toYuan'
    import bankCard from '../filters/filter-bankCard'
    import cashOutDetail from '../components/CashOutDetail.vue'
    import modal from '../components/Modal.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { userApi, payApi, bankcardApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            payPassword,
            modal,
            smsCode,
            cashOutDetail
        },
        filters:{
            bankCard,
            toYuan
        },
        data() {
            return {
                withDrawMoney:'',
                allMoney:'',
                cashOutInfo:'',
                passwordPass:false,
                password:'',
                show:false,
                showPayPassword:false,
                showCashOutDetail:false,
                showSmsCode:false,
                payId:'',
                list:[],
                smsCode:''
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo
            },
            defaultCard(){
                let card = {}
                if(this.list.length){
                    _.each(this.list,(value,index)=>{
                        if(value.defaults == true){
                            card = value
                            return false
                        }
                    })
                }
                return card
            },
            inputPlaceholder(){
                let money = this.allMoneyToYuan(this.allMoney)
                return `可提现金额为 ${money} 元`
            },
            withDrawMoneyToFen(){
                return this.withDrawMoney * 100
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
            ]),

            // function
            withDrawAll(){
                this.withDrawMoney = (this.allMoney / 100).toFixed(2)
            },
            setDefaults(item){
                _.each(this.list,(value,index)=>{
                    if(item == value){
                        value.defaults = true
                    }
                    else{
                        value.defaults = false
                    }
                })
                this.show = false
            },
            goUserMoneyDetail(){
                this.$router.push({
                    name:'user-money-detail'
                })
            },
            setMax(){
                let allMoney = (this.allMoney / 100).toFixed(2)
                if(+this.withDrawMoney > allMoney){
                    this.withDrawMoney = allMoney
                }
            },
            confirm(){
                if(this.withDrawMoney == ''){
                    this.setMsgTip({
                        text:'请输入提现金额',
                        type:'warn'
                    })
                    return
                }
                if(this.withDrawMoney < 2.5){
                    this.setMsgTip({
                        text:'提现金额必须大于等于2.5',
                        type:'warn'
                    })
                    return
                }
                if(+this.withDrawMoney > toYuan(this.cashOutInfo.todayAvailableCashOut)){
                    this.setMsgTip({
                        text:'超过今日可提现额度',
                        type:'warn'
                    })
                    return
                }

                this.showCashOutDetail = true
            },
            payFinish(password){
                this.password = password
                this.passwordPass = true
                this.showPayPassword = false
                this.showSmsCode = true
            },
            cashOutFinish(){
                this.showCashOutDetail = false
                this.showPayPassword = true
            },
            smsFinish(smsCode){
                this.smsCode = smsCode
                this.showSmsCode = false
                this.cashOut()
            },
            allMoneyToYuan(money){
                if(money === 0) return '0.00'
                else if(!money) return '0.00'
                else return (money/100).toFixed(2)
            },
            cashOut(){
                this.showSmsCode = false
                this.showLoading()
                userApi.cashOut({
                    amount:Math.round(this.withDrawMoney * 100),
                    tradePassword:this.password,
                    smsCode:this.smsCode
                })
                .then(result=> {
                    this.hideLoading()
                    this.setMsgTip({
                        text:'提现申请成功',
                        type:'success'
                    })
                    history.go(-1)
                })
                .catch(error=> {
                    console.error(error);
                    this.hideLoading()
                })
            },
            pay(){
                payApi.pay({
                    payId:this.payId,

                    returnUrl:location.href
                })
                .then(result=> {
                    location.href = result.payParam.url
                })
                .catch(error=> {
                    console.error(error);
                    this.hideLoading()
                })
            },
            getBalance(){
                return userApi.getBalance()
                .then(result=> {
                    this.allMoney = result.balance
                })
            },
            getCashOutInfo(){
                return userApi.cashOutInfo()
                .then(result=> {
                    this.cashOutInfo = result
                })
                .catch(error=> {
                    console.error(error);
                    this.hideLoading()
                })
            },
            getList(){
                return bankcardApi.list()
                .then(result=>{
                    this.list = result
                })
            },
        },
        created(){
            this.getCashOutInfo()
            this.showLoading()
            Promise.all([this.getBalance(), this.getList()])
            .then(result=> {
                this.hideLoading()
            })
            .catch(error=> {
                console.error(error)
                this.hideLoading()
            })
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .with-draw{
        .bank-list{
            background-color: #fff;
            margin-top: 16px;
        }
        .bank__item{
            padding: 16px;
            display: flex;
            align-items:center;
            justify-content: space-between;
        }
        .bank__info{
            display: flex;
            img{
                width: 48px;
                height: 48px;
                border-radius:50%;
            }
            .bank__text{
                padding-left: 16px;
                p{
                    @extend %font-subhead;
                    color:$importColor;
                }
                span{
                    @extend %font-caption;
                    display: block;
                    padding-top: 2px;
                }
            }
        }
        .amount{
            background-color: #fff;
            margin-top: 27px;
            position: relative;
            .button{
                position: absolute;
                height:100%;
                line-height:56px;
                right:0;
                top:50%;
                transform:translate(0,-50%);
            }
        }
        .money__input{
            @extend %font-subhead;
            padding:15px 24px;
            width: 100%;
            box-sizing:border-box;
        }
        .cash-tips{
            @extend %font-caption;
            padding: 12px 24px;
            i{
                color:$orange;
            }
        }
        .confirm-button{
            padding:6px 24px 10px 24px;
        }
        .go-detail{
            padding:12px;
            text-align: center;
            @extend %font-caption;
            color:$importColor;
        }
        .modal-bank-list{
            .component-modal__main{
                padding:0 10px;
            }
        }
    }

</style>
